import * as echarts from "../../ec-canvas/echarts.js";
const app = getApp();
const { AskComponent } = app._require("common/index");
AskComponent({
  properties: {
    townName: {
      type: String,
      value: "",
    },
  },
  data: {
    lastThrData: [],
    incomeList: [],
    Chart1: null,
    Chart2: null,
    Chart3: null,
    Chart4: null,
    Chart5: null,
    Chart6: null,
    Chart7: null,
    Chart8: null,
    isIOS: false,
    ecLine: {
      lazyLoad: true,
    },
    operated: {
      lazyLoad: true,
    },
    scale: {
      lazyLoad: true,
    },
    cultural: {
      lazyLoad: true,
    },
    map1: {
      lazyLoad: true,
    },
    map2: {
      lazyLoad: true,
    },
    map3: {
      lazyLoad: true,
    },
    map4: {
      lazyLoad: true,
    },
  },
  lifetimes: {
    attached() {
      this.getData();
      wx.getSystemInfo({
        success: (result) =>
          this.setData({ isIOS: result.system.match(/iOS/) }),
      });
    },
  },
  methods: {
    async getData() {
      const res = await this.$_server("townEconomy/view", {
        params: {},
      });
      if (res.data.code === 200 && res.data.data.data) {
        const GDPList = [];
        const comeList = [];
        const curbanList = [];
        const estateDataList = {
          year: [],
          one: [],
          two: [],
          three: [],
        };
        const operatedDataList = [];
        const scaleDataList = [];
        const culturalDataList = [];
        const urbanRateData = [];
        res.data.data.data.forEach((item) => {
          estateDataList.year.push(item.statistical_year);
          estateDataList.one.push(item.pri_indu);
          estateDataList.two.push(item.sec_indu);
          estateDataList.three.push(item.ter_indu);
          operatedDataList.push(item.pri_eco || 0);
          scaleDataList.push(item.indu_above);
          culturalDataList.push(item.cult_indu || 0);
          comeList.push({
            year: item.statistical_year,
            gdp: item.income_urban,
          });
          GDPList.push({
            year: item.statistical_year,
            GDP: item.GDP,
          });
          urbanRateData.push({
            year: item.statistical_year,
            city: `${item.urban_rate}`,
            country: `${100 - item.urban_rate}`,
          });
        });
        this.setData({
          lastThrData: GDPList.slice(-3),
          incomeList: comeList,
        });
        // urbanRateData = [...curbanList.slice(-4)];
        // 一、二、三产增加值
        const echartsLine = this.selectComponent("#mychart-line");
        echartsLine.init((canvas, width, height, dpr) => {
          this.Chart1 = echarts.init(canvas, null, {
            width: width,
            height: height,
            devicePixelRatio: dpr,
          });
          this.Chart1.setOption(this.getBarOption(estateDataList));
        });
        // 民营经济增加值
        const operated = this.selectComponent("#mychart-operated");
        operated.init((canvas, width, height, dpr) => {
          this.Chart2 = echarts.init(canvas, null, {
            width: width,
            height: height,
            devicePixelRatio: dpr,
          });
          this.Chart2.setOption(
            this.getOperatedPtion(estateDataList, operatedDataList)
          );
        });
        // 规模以上工业增加值
        const scaleChart = this.selectComponent("#mychart-scale");
        scaleChart.init((canvas, width, height, dpr) => {
          this.Chart3 = echarts.init(canvas, null, {
            width: width,
            height: height,
            devicePixelRatio: dpr,
          });
          this.Chart3.setOption(
            this.getOperatedPtion(estateDataList, scaleDataList)
          );
        });
        const culturalChart = this.selectComponent("#mychart-cultural");
        culturalChart.init((canvas, width, height, dpr) => {
          this.Chart4 = echarts.init(canvas, null, {
            width: width,
            height: height,
            devicePixelRatio: dpr,
          });
          this.Chart4.setOption(
            this.getOperatedPtion(estateDataList, culturalDataList)
          );
        });
        // 城镇化率
        const chartMa1 = this.selectComponent("#mychart-map1");
        chartMa1.init((canvas, width, height, dpr) => {
          this.Chart5 = echarts.init(canvas, null, {
            width: width,
            height: height,
            devicePixelRatio: dpr,
          });
          this.Chart5.setOption(this.getPieOption(urbanRateData.slice(-4)[0]));
        });
        const chartMa2 = this.selectComponent("#mychart-map2");
        chartMa2.init((canvas, width, height, dpr) => {
          this.Chart6 = echarts.init(canvas, null, {
            width: width,
            height: height,
            devicePixelRatio: dpr,
          });
          this.Chart6.setOption(this.getPieOption(urbanRateData.slice(-4)[1]));
        });
        const chartMa3 = this.selectComponent("#mychart-map3");
        chartMa3.init((canvas, width, height, dpr) => {
          this.Chart7 = echarts.init(canvas, null, {
            width: width,
            height: height,
            devicePixelRatio: dpr,
          });
          this.Chart7.setOption(this.getPieOption(urbanRateData.slice(-4)[2]));
        });
        const chartMa4 = this.selectComponent("#mychart-map4");
        chartMa4.init((canvas, width, height, dpr) => {
          this.Chart8 = echarts.init(canvas, null, {
            width: width,
            height: height,
            devicePixelRatio: dpr,
          });
          this.Chart8.setOption(this.getPieOption(urbanRateData.slice(-4)[3]));
        });
      }
    },
    // 一、二、三产增加值
    getBarOption(estateData) {
      return {
        disableTouch: true,
        title: {
          // text: "一,二,三产增加值",
          textStyle: {
            fontSize: "12px",
            // color: "#FFFFFF",
          },
        },
        grid: [
          {
            // left: "5%",
            bottom: "10%",
            top: "12%",
            right: "0%",
          },
        ],
        tooltip: {
          trigger: "axis",
          // axisPointer: {
          //   // 坐标轴指示器，坐标轴触发有效
          //   type: "shadow", // 默认为直线，可选为：'line' | 'shadow'
          // },
        },
        legend: {
          x: "0px",
          y: "0px",
          align: "left",
          // itemHeight: 8,
          itemWidth: 24,
          textStyle: {
            fontSize: 12, // 字体大小
            color: "#FFFFFF", // 字体颜色
          },
          data: ["第一产业", "第二产业", "第三产业"],
        },
        color: ["#FF2E19", "#29D9DC", "#F5CF2B"],
        xAxis: [
          {
            type: "category",
            data: estateData.year,
            axisLine: {
              lineStyle: {
                color: "#1C3B69",
                type: "dashed",
              },
            },
            axisLabel: {
              color: "#97B1DC",
            },
          },
        ],
        yAxis: [
          {
            type: "value",
            axisTick: { show: false },
            splitLine: {
              lineStyle: {
                type: "dashed",
                color: "#1C3B69",
              },
            },
            axisLabel: {
              color: "#97B1DC",
              fontSize: "12px",
            },
          },
        ],
        series: [
          {
            name: "第一产业",
            type: "line",
            label: {
              normal: {
                show: true,
                position: "top",
                color: "#FFFFFF",
              },
            },
            data: estateData.one,
          },
          {
            name: "第二产业",
            type: "line",
            label: {
              normal: {
                show: true,
                position: "top",
                color: "#FFFFFF",
              },
            },
            data: estateData.two,
          },
          {
            name: "第三产业",
            type: "line",
            label: {
              normal: {
                show: true,
                position: "top",
                color: "#FFFFFF",
              },
            },
            data: estateData.three,
          },
        ],
      };
    },
    // 民营经济增加值   规模以上工业增加值
    getOperatedPtion(ye, data) {
      return {
        disableTouch: true,
        grid: [
          {
            left: String(Math.max(...data)).length >= 4 ? "12%" : "10%",
            bottom: "10%",
            top: "10%",
            right: "0%",
          },
        ],
        xAxis: {
          type: "category",
          data: ye.year,
          axisLine: {
            lineStyle: {
              color: "#1C3B69",
              type: "dashed",
            },
          },
          axisLabel: {
            color: "#97B1DC",
          },
        },
        yAxis: {
          type: "value",
          splitLine: {
            lineStyle: {
              type: "dashed",
              color: "#1C3B69",
            },
          },
          axisLabel: {
            color: "#97B1DC",
            fontSize: "12px",
          },
        },
        series: [
          {
            data: data,
            // data: [100, 200, 300, 400, 1000],
            type: "bar",
            itemStyle: {
              color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
                {
                  offset: 0,
                  color: "#56CDF6",
                },
                {
                  offset: 1,
                  color: "#234BFC",
                },
              ]),
            },
            label: {
              show: true,
              position: "top",
              formatter: function (val) {
                if (val.value !== 0) {
                  return val.value;
                } else {
                  return "";
                }
              },
              textStyle: {
                color: "#FFFFFF",
                fontSize: 12,
              },
            },
          },
        ],
      };
    },
    // 饼图的options
    getPieOption(data) {
      return {
        disableTouch: true,
        title: [
          {
            text: `${data.year}年城镇化率`,
            left: 10,
            top: 10,
            textStyle: {
              fontSize: "12px",
              color: "#FFFFFF",
            },
          }
        ],
        color: ["#2AD8DC", "#ABD33E"],
        textStyle: {
          fontSize: 14,
          color: "#FFFFFF",
        },
        tooltip: {
          trigger: "item",
        },
        legend: {
          orient: "vertical",
          x: "10px",
          top: "30px",
          data: ["城市", "乡村"],
          itemHeight: 10,
          itemWidth: 10,
          itemGap: 4,
          textStyle: {
            fontSize: 10, // 字体大小
            color: "#ffffff", // 字体颜色
          },
        },
        series: [
          {
            label: {
              normal: {
                fontSize: "10px",
                color: "#5BCFF9",
              },
            },
            type: "pie",
            center: ["50%", "60%"],
            radius: ["0%", "50%"],
            data: [
              {
                value: data.city,
                name: "城市",
                position: "outside",
                labelLine: {
                  show: true,
                  length: 0,
                  length2: 14,
                },
                itemStyle: {
                  borderWidth: 2, //设置border的宽度有多大
                  borderColor: "#0F0F33",
                },
              },
              {
                value: data.country,
                name: "乡村",
                position: "outside",
                labelLine: {
                  show: true,
                  length: 0,
                  length2: 14,
                },
                // 设置两个板块的间距
                itemStyle: {
                  borderWidth: 2,
                  borderColor: "#0F0F33",
                },
              },
            ],
          },
        ],
      };
    },
  },
});
